<template>
  <!-- 在线监测底部 -->
  <div class="smart bigTableStyle">
    <div class="smart-container colcenterbox">
      <el-table
      border
        :data="tableData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="index" label="序号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="region" label="所属地市" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmPowerStation" label="变电站" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmEquipment" label="电压等级" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="区域/房间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="监测类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="测点名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="阀值" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="报警内容" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="报警时间" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
    <div class="smart-page elPaginationStyle colcenterbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout=" total, prev, pager, next, sizes,jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface tableDataList {
  index: number;
  region: string;
  alarmPowerStation: string;
  alarmEquipment: string;
  alarmTemp: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
@Component
export default class OnlieBottom extends Vue {
  tableData: Array<tableDataList> = [
    {
      index: 1,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 2,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 3,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 4,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 5,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 6,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 7,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 8,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 9,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 10,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 11,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 12,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 13,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 14,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 15,
      region: "国网济南供电公司",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
  ];
  tableSelect: Array<object> = [];

  private handleSizeChange(val: number) {
    // console.log(`每页 ${val} 条`);
  }

  private handleCurrentChange(val: number) {
    // console.log(`当前页: ${val}`);
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
}
</script>

<style lang="scss" scoped>
.smart {
  width: 100%;
  height: 100%;
  padding: 2% 2% 0 2%;
  &-container {
    width: 100%;
    height: 90%;
  }
  &-page {
    width: 100%;
    height: 10%;
  }
}
</style>



